<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      a {
        text-decoration: none;
        display: inline-block;
        width: 150px;
      }

      ul {
        width: 600px;
        height: 200px;
        list-style: none;
        margin: 100px auto;
      }
      ul li {
        float: left;
        width: 150px;
        border: 1px solid rebeccapurple;
        text-align: center;
        position: relative;
      }
      
      .one {
        width: 150px;
        height: 150px;
        display: none;
        background-color: rgb(136, 174, 206);

        position: absolute;
        top: 23px;
        left: 0;
      }
      .one > p {
        margin-top: 20px;
        color: rgb(241, 237, 241);
        width: 100%;
        cursor: pointer;
      }
      .active {
        background-color: brown;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>
        <a href="#">湖北省</a>
        <div class="one">
          <p>十堰市</p>
          <p>武汉</p>
          <p>襄樊</p>
        </div>
      </li>
      <li>
        <a href="#">广东省</a>
         <div class="one">
          <p>河源</p>
          <p>惠州</p>
          <p>深圳</p>
        </div>
      </li>
      <li>
        <a href="#">上海省</a>
         <div class="one">
          <p>松江区</p>
          <p>嘉定区</p>
          <p>静安区</p>
        </div>
      </li>
    </ul>
    <script>
      let p = document.querySelectorAll("p");
      let one = document.querySelectorAll(".one");
      let lis = document.querySelectorAll("li");

       
      for (let i = 0; i < lis.length; i++) {
          lis[i].setAttribute("index", i);
           lis[i].onmouseover=function(){
              let index = this.getAttribute("index");
             one[index].style.display="block"
           }
           lis[i].onmouseout=function(){
              let index = this.getAttribute("index");
             one[index].style.display="none"
           }
      }

      for (let i = 0; i < p.length; i++) {
        p[i].onmouseover = function () {
          for (let j = 0; j < p.length; j++) {
            p[j].classList.remove("active");
          }
          this.classList.add("active");
        };
      }


    </script>
  </body>
</html>
